<template>
  <view class="flex-col page" :style="{ paddingTop: safeArea_top + 'px' }">
    <view>
      <image :src="list3[0]" style="width: 100vw" mode="widthFix"></image>
    </view>
    <view class="flex-col section_3">
      <view class="flex-row section_4" v-show="tipsValue">
        <image src="../../static/images/detail-tips.png" class="image_4" />
        <text class="text_1">{{ tipsValue }}</text>
      </view>
      <u-scroll-list class="justify-center horiz-list" :indicator="false">
        <view
          class="flex-col horiz-list-item"
          :key="i"
          v-for="(item, i) in productlList"
          @click="onClickItem(i)"
          :class="{ active: isActive == i }"
        >
          <text class="text_2">{{ item.name }}</text>
          <view class="flex-row group">
            <text class="text_3 prcie">{{ item.price }}</text>
            <text class="text_4">元/{{ item.duration }}分钟</text>
          </view>
        </view>
      </u-scroll-list>
    </view>

    <u-skeleton
      class="flex-col section_8"
      rows="3"
      :loading="loading"
      :title="false"
      titleWidth="100%"
      v-show="loading"
      rowsHeight="26"
    ></u-skeleton>
    <view class="content" v-show="!loading">
      <view class="flex-col section_8">
        <view class="flex-row">
          <text
            class="text_19"
            :class="{ active: isTabActive == 1 }"
            @click="onClickTab(1)"
            >项目介绍
            <image
              v-show="isTabActive == 1"
              src="../../static/images/isTabActive.png"
              class="image_11"
            />
          </text>
          <text
            class="text_19"
            :class="{ active: isTabActive == 2 }"
            @click="onClickTab(2)"
            >下单须知
            <image
              v-show="isTabActive == 2"
              src="../../static/images/isTabActive.png"
              class="image_11"
            />
          </text>
          <text
            class="text_19"
            :class="{ active: isTabActive == 3 }"
            @click="onClickTab(3)"
            >禁忌说明
            <image
              v-show="isTabActive == 3"
              src="../../static/images/isTabActive.png"
              class="image_11"
            />
          </text>
        </view>
        <rich-text :nodes="content" v-if="isTabActive == 1"></rich-text>
        <view v-if="isTabActive == 2" class="intro">
          <view>
            貂蝉到家为订单服务信息提供方，对您与商家之间因订单服务产生纠纷会全力协助配解决，若您私下交易，由此您与商家之间产生的一切纠纷与本平台无关。
          </view>
          <view>
            1.貂蝉到家所提供的服务属于舒缓保健类型，不具备医疗性质，如需治疗还请前往正规医院就诊。
          </view>
          <view>
            2.貂蝉到家提供的是专业正规的推拿按摩服务，对于不正当的行为和要求，技师有权拒绝，保留诉讼的权利。
          </view>
          <view>
            3.顾客下单后，理疗师会按订单预约时间及服务地址等信息前往，请留意订单动态并保持电话畅通。
          </view>
          <view>
            4.顾客下单后，因自身原因取消订单，理疗师还未出发，扣除10元空单费。
          </view>
          <view>
            5.顾客下单后，理疗师与客户联系确定了服务时间、服务地址，理疗师按了出发，客户要取消订单的，平台将扣除交通费及10元空单费。
          </view>
          <view>
            6.理疗师到达服务地址后，客户因看见理疗师不够漂亮等与专业无关系列因素而要求退单者，平台将扣除50%的项目费用及交通费。
          </view>
          <view
            >7.理疗师到达服务地址后，若联系不上客户，理疗师会等待15分钟;如15分钟后仍无法联系上，理疗师则会自行离开，并且该笔订单会自动取消，平台将扣除50%的项目费用及交通费。</view
          >
          <view>
            8.服务开始后，因顾客原因提前终止服务的，服务费及交通费将不予退还。
          </view>
          <view>
            9.您在接受相应服务后向商家提出退款要求的，非因商家服务质量存在严重瑕疵，商家不提供退款服务。
          </view>
          <view>
            10.订单支付后，如需退款，请在点击
            我的-&gt;联系客服，发送订单截图给客服并申请退款。
          </view>

          <view><b>【隐私保护】</b></view>
          <view>
            请您注意，我们非常重视号码隐私保护，对商家隐藏您的真实手机号，保护您的隐私安全。通信过程，商家的app等设备终端，不会暴露您的真实手机号。我们通过设置虚拟号码（中间号码）等措施来保障您的号码隐私。
          </view>
          <view>
            1.使用隐私号码保护订单，在接听和拨打电话的通话过程中都可能会被录音，在发送和接收短信的通信过程中都可能会被存储相关内容。
          </view>
          <view>
            2.经您授权，当用户、商家间出现服务纠纷时，平台可调取并使用录音信息、短信内容作为解决纠纷的参考依据;另为预防风险保护各方安全，系统可能会对隐私号录音、短信内容进行技术分析。
          </view>
          <view>
            3.平台将切实保障通信双方的隐私安全，录音、短信将上传至貂蝉到家服务器保存，各方无法自行下载、调取；除下述规定的情况外（A.事先获取您明确的同意或授权；B.为履行法定义务所必需:根据法律法规的规定、诉讼争议解决需要，或行政、司法等有权机关依法提出的要求；C.在我们需要接受来自其他主体的尽职调查时，我们会把您的信息提供给必要的主体，但我们会通过和这些主体签署保密协议等方式要求其对您的个人信息采取保密措施。)平台不会将录音、短信提供给任何人。
          </view>
          <view>
            4.录音、短信内容保存期限按照法律法规所规定的保存期限及为实现个人信息处理目的所必需的期限内存储您的个人信息。
          </view>
          <view>
            5.受网络状态稳定性等限制，极端情况下，可能会出现无法录音或部分录音无法听清等录音失败，无法存储或部分短信内容无法解析等储存失败情形。如遇此类情形，平台无需承担责任。
          </view>
        </view>
        <view v-if="isTabActive == 3" class="intro">
          <view>1.饭后半小时不宜进行按摩</view>
          <view>2.妇女经期或妊娠期不宜做腹部、腰骶部按摩</view>
          <view>3.骨折复位、开放性骨折，人体内有金属固定物禁用</view>
          <view>4.感染性疾病、如骨核、骨髓炎禁用</view>
          <view
            >5.皮肤病、皮肤破损者（如疱疹、瘟疹、脓肿蜂窝组织炎、烧伤、烫伤者）禁用
          </view>
          <view>6.需要外科手术者禁用</view>
          <view>7.其他严重疾病或诊断不明的较严重疾病禁用</view>
          <view>8.眼部疾病患病期、近期做过眼部手术或做过填充的禁用</view>
        </view>
      </view>
    </view>
    <view class="flex-col group_14">
      <view class="section_13"> </view>
      <view class="flex-row section_14">
        <view
          class="flex-col items-center group_15"
          @click="onCollection()"
          v-if="false"
        >
          <u-icon
            size="28"
            :name="name"
            :color="name === 'heart-fill' ? 'rgb(243, 151, 53)' : ''"
          ></u-icon>
          <text>收藏</text>
        </view>
        <view class="flex-col group_16" @click="onConfirm()">
          <view class="flex-col items-center button">
            <text v-if="type == 0">下单选择技师</text>
            <text v-if="type == 1">立即下单</text>
          </view>
        </view>
      </view>
    </view>

    <coupon ref="coupon" :couponList="coupon"></coupon>
  </view>
</template>

<script>
import coupon from "./components/coupon.vue";
export default {
  components: {
    coupon,
  },
  data() {
    return {
      loading: true,
      productlList: [],
      isActive: 0,
      isTabActive: 1,
      list3: [],
      content: "",
      showHeight: 200,
      tagStyle: {
        p: "color: #606266; line-height: 24px;",
      },
      shadowStyle: {
        position: "relative",
        backgroundImage:
          "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
        paddingTop: "100px",
        marginTop: "-100px",
      },
      tipsValue: "",
      id: null,
      praise: 0,
      isVip: 0,
      is_vip: false,
      vip_discount: 0,
      comment_count: 0,
      comment: [],
      comment_index: 0,
      list: [],
      total: null,
      page: 1,
      name: "heart",
      coupon: [],
      type: 0,
      technician_id: 0,
      notice: "",
      is_ios: 1,
      safeArea_top: 0,
    };
  },
  onLoad(options) {
    // #ifdef APP-PLUS
    const safeArea = uni.getStorageSync("safeArea");
    this.safeArea_top = safeArea.top;
    // #endif
    this.id = options.id;
    if (options.type) {
      this.type = options.type;
      this.technician_id = options.technician_id;
    }
  },
  onShow() {
    uni.$u.sleep(500).then(() => {
      this.init();
    });
    this.$http.post("api/index/shareConfig").then((res) => {
      const { is_vip } = res;
      this.isVip = is_vip;
    });

    // #ifdef APP-PLUS
    this.is_ios = uni.getStorageSync("is_ios");
    // #endif
  },
  methods: {
    init() {
      // 获取详情
      var platformName = uni.getStorageSync("name")
        ? uni.getStorageSync("name")
        : "";
      this.$http
        .post("api/index/serviceDetails", {
          id: this.id,
        })
        .then((res) => {
          this.tipsValue = "24小时随叫随到按摩 · 就选" + platformName;
          let { service, vip, spec, comment, config } = res;
          this.config = config;
          this.list3 = service.banner;
          this.content = service.introduce;
          this.notice = service.notice;
          this.praise = service.praise;
          this.comment_count = service.comment_count;
          for (let i in vip) {
            this[i] = vip[i];
          }
          this.productlList = spec;
          this.comment = comment;
          this.getList();
          this.getCoupon();
          this.loading = false;
        });
    },
    // 获取评论列表
    getList() {
      this.$http
        .post("api/index/comment", {
          id: this.id,
          type: this.comment[this.comment_index].id,
          page: this.page,
        })
        .then((res) => {
          let { list, total } = res;
          this.list.push(...list);
          this.total = Number(total);
        });
    },
    // 获取优惠券
    getCoupon() {
      this.$http
        .post("api/index/coupon", {
          id: this.id,
        })
        .then((res) => {
          this.coupon = res;
        });
    },
    changeComment(index) {
      this.comment_index = index;
      this.page = 1;
      this.total = null;
      this.list = [];
      this.getList();
    },
    load() {
      this.$refs.uReadMore.init();
    },
    open(name) {
      console.log("open", name);
    },
    close(name) {
      console.log("close", name);
    },
    onPullDownRefresh() {
      let _self = this;
      console.log("refresh");
      setTimeout(function () {
        uni.stopPullDownRefresh(); //停止当前页面下拉刷新
        _self.page = 1;
        _self.total = null;
        _self.list = [];
        _self.init();
      }, 1000);
    },
    onClickItem(e) {
      if (this.isActive !== e) {
        this.isActive = e;
      }
    },
    onClickTab(e) {
      console.log(this.config);
      if (this.isTabActive !== e) {
        this.isTabActive = e;
      }
    },
    onCollection() {
      this.$http
        .post("api/collect/collect", {
          technician_id: this.id,
        })
        .then((res) => {
          this.name === "heart-fill"
            ? (this.name = "heart")
            : (this.name = "heart-fill");
          if (this.name === "heart-fill") {
            uni.showToast({
              icon: "none",
              title: "收藏成功",
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "取消成功",
            });
          }
        });
    },
    onConfirm() {
      let isActive = this.productlList[this.isActive];

      uni.setStorageSync("order_info", {
        service_id: this.id,
        spec_id: isActive.id,
        coupon_id: 0,
      });
      if (this.type == 1) {
        let order_info = uni.getStorageSync("order_info");
        order_info.technician_id = this.technician_id;
        uni.setStorageSync("order_info", order_info);
        uni.navigateTo({
          url: `/pages/confirm_order/confirm_order?id=${this.technician_id}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/selectTechnician/selectTechnician?id=${this.id}&name=${
            this.productlList[this.isActive].name
          }`,
        });
      }
    },
    showCoupon() {
      this.$refs.coupon.open();
    },
    toPath(url) {
      uni.navigateTo({
        url,
      });
    },
    yulan(index, urls) {
      uni.previewImage({
        current: index,
        urls: urls,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 86rpx;
  background-color: #f8f8f8;

  .content {
    .intro {
      white-space: pre-wrap;
      line-height: 23px;
      font-size: 12px;
    }
  }

  .section_1 {
    padding: 88rpx 0 24rpx;
    color: rgb(255, 255, 255);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
    white-space: nowrap;
    background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844674346731028.png");
    background-position: 0px 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .section_2 {
      padding: 20rpx 32rpx 18rpx;
      background-color: rgba(0, 0, 0, 0.24);
    }

    .image_3 {
      margin-top: 348rpx;
      align-self: center;
      width: 104rpx;
      height: 12rpx;
    }
  }

  .section_3 {
    padding: 24rpx 0 24rpx 24rpx;
    background-color: rgb(255, 255, 255);

    .section_4 {
      margin-right: 32rpx;
      padding: 10rpx 26rpx 14rpx;
      color: rgb(102, 102, 102);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
      background-color: rgb(248, 248, 248);
      border-radius: 24rpx;

      .image_4 {
        margin-top: 4rpx;
        width: 112rpx;
        height: 36rpx;
      }

      .text_1 {
        margin-left: 26rpx;
      }
    }

    .horiz-list {
      padding: 24rpx 0 0;

      .horiz-list-item {
        padding: 22rpx 18rpx 26rpx 22rpx;
        background-color: #f8f8f8;
        border-radius: 24rpx;
        height: 152rpx;
        margin: 0 8rpx;

        &.active {
          background-color: #fff;
          border: solid 2rpx #38987c;
        }

        .text_2 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;
        }

        .group {
          margin-top: 4rpx;

          .text_3 {
            color: rgb(243, 151, 53);
            font-size: 44rpx;
            line-height: 52rpx;
            white-space: nowrap;
            font-family: Price-Bold;
          }

          .text_4 {
            margin: 16rpx 4rpx 0;
            color: rgb(153, 153, 153);
            font-size: 24rpx;
            font-weight: 500;
            line-height: 34rpx;
            white-space: nowrap;
          }
        }
      }

      .horiz-list-item_1 {
        margin-left: 24rpx;
        padding: 24rpx 24rpx 28rpx;
        background-color: rgb(248, 248, 248);
        border-radius: 24rpx;
        height: 152rpx;

        .text_5 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;
        }

        .group_1 {
          margin-top: 4rpx;

          .text_6 {
            color: rgb(243, 151, 53);
            font-size: 44rpx;
            line-height: 52rpx;
            white-space: nowrap;
          }

          .text_7 {
            margin-left: 4rpx;
            margin-top: 16rpx;
            color: rgb(153, 153, 153);
            font-size: 24rpx;
            font-weight: 500;
            line-height: 34rpx;
            white-space: nowrap;
          }
        }
      }

      .horiz-list-item_2 {
        margin-left: 24rpx;
        padding: 24rpx 0 28rpx;
        background-color: rgb(248, 248, 248);
        border-radius: 24rpx 0 0 24rpx;
        width: 160rpx;
        height: 152rpx;

        .text_8 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;
        }

        .text_9 {
          margin-top: 4rpx;
          color: rgb(243, 151, 53);
          font-size: 44rpx;
          line-height: 52rpx;
          white-space: nowrap;
        }
      }
    }

    .section_5 {
      margin-right: 32rpx;
      padding: 26rpx 24rpx;
      background-image: linear-gradient(
        97.2deg,
        rgb(81, 81, 81) 0%,
        rgb(81, 81, 81) -15.28%,
        rgb(36, 36, 36) 114.1%,
        rgb(36, 36, 36) 100%
      );
      border-radius: 24rpx;

      .group_2 {
        color: rgb(226, 189, 128);
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        white-space: nowrap;

        .text_10 {
          margin: 4rpx 0 4rpx 16rpx;
        }
      }

      .text-wrapper {
        padding: 6rpx 0 2rpx;
        color: rgb(38, 38, 38);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
        background-image: linear-gradient(
          125.9deg,
          rgb(255, 218, 157) 0%,
          rgb(255, 218, 157) -7.15%,
          rgb(231, 191, 124) 104.11%,
          rgb(231, 191, 124) 100%
        );
        border-radius: 24rpx;
        width: 136rpx;
        height: 48rpx;
      }
    }
  }

  .section_6 {
    margin-top: 26rpx;
    padding: 20rpx 32rpx;
    background-color: rgb(255, 255, 255);

    .text_12 {
      margin: 4rpx 0;
      color: rgb(0, 0, 0);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;
    }

    .group_3 {
      margin: 4rpx 0;
      color: rgb(80, 80, 80);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .text_13 {
        margin-left: 8rpx;
      }

      .image_8 {
        margin: 6rpx 0 6rpx 30rpx;
        width: 24rpx;
        height: 28rpx;
      }

      .text_14 {
        margin-left: 12rpx;
      }
    }
  }

  .section_7 {
    padding: 22rpx 32rpx;
    background-color: rgb(255, 255, 255);

    .image_10 {
      margin-right: 8rpx;
      align-self: center;
      width: 32rpx;
      height: 8rpx;
    }

    .text_15 {
      color: rgb(0, 0, 0);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;
    }

    .group_5 {
      margin-left: 20rpx;
      color: rgb(255, 255, 255);
      font-size: 24rpx;
      line-height: 34rpx;
      white-space: nowrap;

      .left-text-wrapper {
        margin-right: 10rpx;
        padding: 6rpx 10rpx 4rpx;
        background-color: rgba(24, 181, 103, 0.12);
        color: #38987c;
        border-radius: 8rpx;
        // width: 144rpx;
        height: 44rpx;
      }

      .view_1 {
        margin-left: 16rpx;
      }
    }
  }

  .section_8 {
    margin-top: 24rpx;
    padding: 24rpx 32rpx 60rpx;
    background-color: rgb(255, 255, 255);

    .image_11 {
      margin-left: 44rpx;
      margin-bottom: 10rpx;
      width: 42rpx;
      height: 20rpx;
    }

    .text_20 {
      margin-top: 24rpx;
      color: rgb(0, 0, 0);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;
    }

    .text_21 {
      margin-right: 14rpx;
      margin-top: 24rpx;
      color: rgb(102, 102, 102);
      font-size: 28rpx;
      line-height: 44rpx;
      text-align: left;
    }

    .text_19 {
      margin-left: 40rpx;
      margin-top: 4rpx;
      color: rgb(102, 102, 102);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      &.active {
        color: rgb(0, 0, 0);
        font-size: 32rpx;
        font-weight: bold;
        line-height: 44rpx;
        white-space: nowrap;
      }
    }
  }

  .section_9 {
    padding: 12rpx 0;
    color: rgb(153, 153, 153);
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: nowrap;
    background-color: rgb(255, 255, 255);

    .image_12 {
      margin-left: 14rpx;
      align-self: center;
      width: 20rpx;
      height: 12rpx;
    }
  }

  .section_10 {
    margin-top: 24rpx;
    padding: 28rpx 32rpx 24rpx;
    background-color: rgb(255, 255, 255);

    .group_8 {
      margin-bottom: 4rpx;
      color: rgb(153, 153, 153);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }

    .text_23 {
      color: rgb(0, 0, 0);
      font-size: 32rpx;
      font-weight: 500;
      line-height: 44rpx;
      white-space: nowrap;
    }

    .text_24 {
      color: rgb(102, 102, 102);
      font-size: 32rpx;
      line-height: 44rpx;
      white-space: nowrap;
    }
  }

  .section_11 {
    padding: 24rpx 32rpx;
    background-color: rgb(255, 255, 255);

    .group_9 {
      color: rgb(24, 181, 103);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
      display: flex;
      flex-flow: wrap;
      .text-wrapper_1 {
        padding: 8rpx 4rpx;
        background-color: rgba(24, 181, 103, 0.12);
        border-radius: 16rpx;
        width: 160rpx;
        height: 56rpx;
        margin-right: 20rpx;
      }

      .select {
        padding: 8rpx 20rpx;
        background-color: rgba(24, 181, 103, 0.12);
        border-radius: 16rpx;
        height: 56rpx;
        margin-right: 20rpx;
        margin-top: 15rpx;
      }

      .no-select {
        padding: 8rpx 20rpx;
        background-color: rgb(248, 248, 248);
        border-radius: 16rpx;
        height: 56rpx;
        margin-right: 20rpx;
        margin-top: 15rpx;
        color: rgb(153, 153, 153);
      }

      .view_3 {
        margin-left: 24rpx;
      }

      .text-wrapper_2 {
        margin-left: 24rpx;
        padding: 8rpx 0;
        background-color: rgba(24, 181, 103, 0.12);
        border-radius: 16rpx;
        width: 176rpx;
        height: 56rpx;
      }

      .text-wrapper_3 {
        margin-left: 24rpx;
        padding: 8rpx 0;
        background-color: rgba(24, 181, 103, 0.12);
        border-radius: 16rpx;
        width: 118rpx;
        height: 56rpx;
      }
    }

    .group_10 {
      margin-top: 24rpx;
      color: rgb(153, 153, 153);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .text-wrapper_4 {
        padding: 8rpx 0;
        background-color: rgb(248, 248, 248);
        border-radius: 16rpx;
        width: 216rpx;
        height: 56rpx;
      }

      .text-wrapper_5 {
        margin-left: 24rpx;
        padding: 8rpx 0;
        background-color: rgb(248, 248, 248);
        border-radius: 16rpx;
        width: 176rpx;
        height: 56rpx;
      }
    }

    .group_no {
      padding-bottom: 144rpx;
    }
  }

  .section_12 {
    padding: 38rpx 32rpx 24rpx;
    background-color: rgb(255, 255, 255);

    .group_11 {
      color: rgb(0, 0, 0);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;

      .image_14 {
        border-radius: 50%;
        width: 72rpx;
        height: 72rpx;
      }

      .group_12 {
        margin-left: 16rpx;

        .image_15 {
          margin-top: 8rpx;
          width: 136rpx;
          height: 24rpx;
        }

        .star {
          display: flex;
        }
      }
    }

    .text_33 {
      margin-right: 14rpx;
      margin-top: 24rpx;
      color: rgb(102, 102, 102);
      font-size: 28rpx;
      line-height: 44rpx;
      text-align: left;
    }

    .group_13 {
      margin-top: 23rpx;
      color: rgb(153, 153, 153);
      font-size: 24rpx;
      line-height: 34rpx;
      white-space: nowrap;

      .text_34 {
        margin-top: 15rpx;
      }

      .equal-division-item {
        border-radius: 12rpx;
        width: 212rpx;
        height: 214rpx;
        margin-right: 20rpx;
      }

      .image_17 {
        margin-left: 26rpx;
      }

      .image_18 {
        margin-left: 24rpx;
      }
    }
  }

  .group_14 {
    padding: 2rpx 0 68rpx;
    position: fixed;
    bottom: 0;
    width: 100vw;

    .section_13 {
      background-color: rgb(255, 255, 255);
      height: 84rpx;
    }

    .section_14 {
      padding: 16rpx 32rpx;
      background-color: rgb(255, 255, 255);
      box-shadow: 0px -8rpx 16rpx 0px rgba(0, 0, 0, 0.06);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2rpx;

      .group_15 {
        margin-bottom: 4rpx;
        color: rgb(80, 80, 80);
        font-size: 20rpx;
        line-height: 28rpx;
        white-space: nowrap;

        .image_19 {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .group_16 {
        margin-left: 40rpx;
        flex: 1 1 auto;
        color: rgb(255, 255, 255);
        font-size: 32rpx;
        line-height: 44rpx;
        white-space: nowrap;

        .button {
          padding: 22rpx 0;
          background-color: #38987c;
          border-radius: 42rpx;
        }
      }
    }
  }

  .image_6 {
    margin: 4rpx 0;
    width: 32rpx;
    height: 32rpx;
  }

  .image {
    width: 48rpx;
    height: 48rpx;
  }
}
</style>
